import React from 'react';
import Svg, {
  G,
  Path,
  Defs,
  LinearGradient,
  Stop,
  Rect,
  ClipPath,
} from 'react-native-svg';
import {BasicsProps} from './type';

type Props = {
  fillStart?: string; // 渐变开始颜色
  fillEnd?: string; // 渐变结束颜色
} & BasicsProps;

const HomeIcon = ({
  size,
  fillStart = '#FF813A',
  fillEnd = '#FF685A',
}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 28 28">
      <G id="Home" clipPath="url(#clip0_47_1192)">
        <Path
          id="Fill-1"
          d="M21.3231 26.2561H19.0784C17.7928 26.2258 16.8011 25.2166 16.8011 23.9589V20.3703C16.8011 19.9398 16.4429 19.5898 16.0031 19.5898H12.6361C12.2056 19.5921 11.8498 19.9433 11.8498 20.3703V23.9473C11.8498 24.0347 11.8381 24.1187 11.8136 24.1981C11.6876 25.3531 10.7006 26.2561 9.50475 26.2561H7.26008C4.54292 26.2561 2.33325 24.0639 2.33325 21.3701V11.2038C2.34492 10.0441 2.87925 8.98242 3.80209 8.28358L11.4263 2.16442C13.1051 0.834418 15.4443 0.834418 17.1196 2.16208L24.7986 8.28708C25.7004 8.97425 26.2348 10.0336 26.2499 11.1793V21.3701C26.2499 24.0639 24.0403 26.2561 21.3231 26.2561Z"
          fill="url(#paint0_linear_47_1192)"
        />
      </G>
      <Defs>
        <LinearGradient
          id="paint0_linear_47_1192"
          x1="14.2916"
          y1="1.16663"
          x2="14.2916"
          y2="26.2561"
          gradientUnits="userSpaceOnUse">
          <Stop offset="0" stopColor={fillStart} />
          <Stop offset="1" stopColor={fillEnd} />
        </LinearGradient>
        <ClipPath id="clip0_47_1192">
          <Rect width="28" height="28" fill="white" />
        </ClipPath>
      </Defs>
    </Svg>
  );
};

export default HomeIcon;
